/* 首页 */
<template>
  <div class="carousel">
    <!-- 中心标题 -->
    <div class="carousel_title">
      <h1>
        <span>
          Hi !
        </span>
        <span>
          Lime !
        </span>
      </h1>
    </div>

    <!-- 文字-图标框 -->
    <div class="carousel_tip">
      <div class="square flex_column flex_a_center flex_j_center">
        <!-- 三角形 -->
        <span class="triangle"></span>
        <p>{{ verse }}</p>
        <ul class="carousel_title_icon flex_row">
          <li>
            <a href="https://gitee.com/abc1478" target="_blank">
              <svg-icon icon-class="gitee" />
            </a>
            <!-- <img src="~/static/img/wx.jpg" alt="" /> -->
          </li>
          <li>
            <svg-icon icon-class="github" />
            <!-- <img src="~/static/img/wx.jpg" alt="" /> -->
          </li>
          <li>
            <svg-icon icon-class="wx" />
            <img src="~/static/img/wx.jpg" alt="" />
          </li>
          <li>
            <svg-icon icon-class="qq" />
            <img src="~/static/img/qq.jpg" alt="" />
          </li>
          <li>
            <a href="https://music.163.com/#/user/home?id=294342298" target="_blank">
              <svg-icon icon-class="wy" />
            </a>

            <!-- <img src="~/static/img/wx.jpg" alt="" /> -->
          </li>
          <li>
            <a href="https://500px.com.cn/LimeL" target="_blank">
              <svg-icon icon-class="500px" />
            </a>

            <!-- <img src="~/static/img/wx.jpg" alt="" /> -->
          </li>
        </ul>
      </div>
    </div>
    <ul>
      <li
        class="star"
        v-for="item in starCount"
        :key="item.id"
        :style="{
          top: item.top + 'px',
          left: item.left + 'px',
          animationDelay: item.delay + 's',
        }"
      ></li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator' // ts装饰器
import { Getverse, GetnodeMusic, CloudMusic_Login } from '@/plugins/axios/api' // 按需导入接口
@Component({
  name: 'HomePage',
})
export default class HomePage extends Vue {
  verse = null
  starCount: any[] = []
  // ts类组件声明
  // @Prop({ default: 'default value' }) readonly propB!: string // Prop
  // @Watch('child') // 监听器
  // onChildChanged(val: string, oldVal: string) {} // 监听器相应方法
  // 钩子函数
  created(): void {
    this.setStarCount()
  }
  mounted(): void {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 800)
    })

    this.getVerse()
  }
  setStarCount() {
    //生成星星的方法
    for (let i = 0; i < 30; i++) {
      // i < 星星个数
      interface Person {
        id: number
        top: number
        left: number
        delay: number
      }
      let star: Person = {
        id: 0,
        top: 0,
        left: 0,
        delay: 0,
      } //定义存储一个星星的对象

      let top: number = parseInt((Math.random() * 1000).toString()) //定义星星的top值
      let left: number = parseInt((Math.random() * 5000).toString()) //定义星星的left值
      let delay: number = parseInt((Math.random() * 10).toString()) //定义星星的动画延迟时间
      star.id = i
      star.top = top
      star.left = left
      star.delay = delay
      this.starCount.push(star)
    }
  }
  //获取每日一言
  getVerse() {
    Getverse()
      .then((res: any) => {
        this.verse = res.data.content
      })
      .catch()
  }
}
</script>

<style lang="less" scoped>
@import 'index.less';
</style>
